<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Dojox RangeSlider Test</title>
    <style type="text/css">
        @import "../../../dojo/resources/dojo.css";
        @import "../../../dijit/themes/tundra/tundra.css";
        @import "../../../dijit/themes/dijit.css";
        @import "../../../dijit/tests/css/dijitTests.css";
        @import "../resources/RangeSlider.css";
    </style>
    
    <style>
        /* showing a big yellow bar */
        #hrCustomSlider .dijitSliderProgressBar {
            background:yellow !important;
            height:12px;
            overflow:visible;
            margin-top: -5px;
        }

    </style>

    <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dojox.form.RangeSlider");
        dojo.require("dijit.form.HorizontalRule");
        dojo.require("dijit.form.HorizontalRuleLabels");
        dojo.require("dijit.form.VerticalRule");
        dojo.require("dijit.form.VerticalRuleLabels");
    </script>
    <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
</head>
<body class="tundra">
    <h1 class="testTitle">Dojox RangeSlider test</h1>
    Just try to drag the slider endpoints and the bar in the middle. You can also use the bumper and the arrows on the left and right to manipulate the range. It's also possible to tab through the slider parts and move the handlers or bar with left/right/up/down-button. 
    <h2>Horizontal slider</h2>
    <div 
        id="hrSlider" 
        discreteValues="11"
        onChange="dojo.byId('minValue').value=dojo.number.format(arguments[0][0]/100,{places:1,pattern:'#%'});dojo.byId('maxValue').value=dojo.number.format(arguments[0][1]/100,{places:1,pattern:'#%'});"
        style="width:500px;" 
        value="80,20" 
        intermediateChanges="true"
        dojoType="dojox.form.HorizontalRangeSlider">
        <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="7" constraints="{pattern:'#.00%'}"></ol>
        <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=7 style="height:10px;margin-bottom:-5px;"></div>
    </div>
    Horizontal Slider Min Value:<input readonly id="minValue" size="10" value="20.0%"/><br/>
    Horizontal Slider Max Value:<input readonly id="maxValue" size="10" value="80.0%"/><br/>
    <button id="disableButton" dojoType="dijit.form.Button" onClick="dijit.byId('hrSlider').attr('disabled', true);dijit.byId('disableButton').attr('disabled',true);dijit.byId('enableButton').attr('disabled',false);">Disable previous slider</button>
    <button id="enableButton"  dojoType="dijit.form.Button" onClick="dijit.byId('hrSlider').attr('disabled', false);dijit.byId('disableButton').attr('disabled',false);dijit.byId('enableButton').attr('disabled', true);" disabled>Enable previous slider</button>
    
    <h2>A customized horizontal slider</h2>
    <div 
        id="hrCustomSlider"
        discreteValues="22"
        dojoType="dojox.form.HorizontalRangeSlider"
        showButtons="false">
    </div>
    <button id="getValues" dojoType="dijit.form.Button" onClick="console.dir(dijit.byId('hrCustomSlider').getValue());">Get Value</button>
    <h2>Vertical slider</h2>
    <div 
        id="vrSlider"
        onChange="dojo.byId('vMinValue').value=dojo.number.format(arguments[0][1],{places:1,pattern:'#'});dojo.byId('vMaxValue').value=dojo.number.format(arguments[0][0],{places:1,pattern:'#'});"
        style="height:300px;" value="20,50"
        dojoType="dojox.form.VerticalRangeSlider">
        <ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="width:2em;color:gray;" labelStyle="right:0px;">
            <li>0</li>
            <li>100</li>
        </ol>
        <div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
        <div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
        <ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration" style="width:2em;color:gray;" count="6" numericMargin="1" maximum="100" constraints={pattern:'#'}></ol>
    </div>
    Vertical Slider Max Value:<input readonly id="vMaxValue" size="10" value="50.0"/><br/>
    Vertical Slider Min Value:<input readonly id="vMinValue" size="10" value="20.0"/><br/>
</body>
</html>
